<template>
  <div class="city-selector">
    <router-link to="City">
      <span class="city-title">{{this.$store.state.cityName}}</span>
      <span class="iconfont icon-header-arrow"></span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'CitySelector'
  }
</script>

<style lang="scss" scoped>
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .city-selector {
    @include flex-row;
    @include vh-center;
    width: .6rem;
    height: $headerHeight;

    a {
      @include flex-row;
      @include vh-center;
      width: 100%;
      height: $headerHeight;

      .city-title {
        font-size: .16rem;
        font-weight: bold;
      }

      .iconfont{
        font-size: .08rem;
        margin-left: .03rem;
      }
    }
  }
</style>
